<ion-view view-title="{{'kMonitors' | translate}}" cache-view="false">
  <ion-nav-buttons side="left">
    <button id="monitors-move-2" class="button button-icon button-clear ion-navicon" ng-click="openMenu()">
    </button>
    <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge"
      ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
  </ion-nav-buttons>
  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll class="notch-ready">
    <ion-refresher pulling-text="{{'kPullToReload' | translate}}..." spinner="bubbles" on-refresh="doRefresh()">
    </ion-refresher>
    <div style="float:right;margin-top:3px;margin-right:8px;">
      <a id="monitors-move-2" class="button button-small icon icon-left icon ion-ios-world-outline" href="" ng-click="changeConfig('All');">{{'kGlobalConfiguration'
        | translate}}</a>
    </div>
    <br />
    <div class="list card" ng-repeat="monitor in monitors">
      <div class="item" ng-style="{'background-color': monitor.Monitor.Enabled=='1'?'white':'white'}">
        <div ng-if="monitor.Monitor.Enabled == '1'">
          <div class='item'>
            <span class="item-icon-left">
              <div class="icon">
                <span class="ion-ios-videocam-outline"></span> &nbsp;
                <span ng-class="{'ion-eye':monitor.Monitor.listDisplay=='show','ion-eye-disabled':monitor.Monitor.listDisplay!='show'}">
                </span>
              </div>
              &nbsp;
              <b>{{monitor.Monitor.Name}}</b>
            </span>
            <span class="item-icon-right">
              <i class="icon {{monitor.Monitor.char}}" ng-style="{'color':monitor.Monitor.color}"></i>
            </span>
            <!-- <i ng-class="{'icon ion-eye':monitor.Monitor.listDisplay=='show','icon ion-eye-disabled':monitor.Monitor.listDisplay!='show'}"> </i>-->
          </div>
        </div>
        <div ng-if="monitor.Monitor.Enabled != '1'">
          <span class='item item-icon-left item-icon-right'>
            <i class="icon ion-ios-videocam-outline"></i>
            <b>{{monitor.Monitor.Name}}</b>
            <i class="icon {{monitor.Monitor.char}}" style="color:grey;"></i>
          </span>
        </div>
        <p>
        {{hasFunction}}<br/>
        {{monitor.Monitor.Function}}<br/>
        {{monitor.Monitor.Capturing}}<br/>

        <div ng-if="hasFunction">
          {{'kCapturing' | translate}} :{{monitor.Monitor.Capturing}}
          {{'kAnalysing' | translate}} :{{monitor.Monitor.Analysing}}
          {{'kRecording' | translate}} :{{monitor.Monitor.Recording}}
        </div>
        <div ng-if="!hasFunction">
          {{'kMode' | translate}} :{{monitor.Monitor.Function}}
        </div>
          <br /> {{'kForceMjpeg' | translate}}: {{monitor.Monitor.forceMjpeg}}
          <br /> {{'kResolution' | translate}}: {{monitor.Monitor.Width}}*{{monitor.Monitor.Height}}
          <br /> {{'kMaxFPS' | translate}}: {{monitor.Monitor.MaxFPS}}
          <br /> {{'kAlarmMaxFPS' | translate}}:{{monitor.Monitor.AlarmMaxFPS}}
          <br /> {{'kAlarmFrameCount' |translate}}: {{monitor.Monitor.AlarmFrameCount}}
          <br /> {{'kStatus' | translate}}: {{monitor.Monitor.isRunningText}}
          <br /> {{'kId' | translate}}: {{monitor.Monitor.Id}}
          <br /> {{'kEventRecording' | translate}}: {{monitor.Monitor.recordingType}}
          <br />{{'kMonStreamingURL' | translate}}: {{monitor.Monitor.streamingURL}}
          <br />{{'kMonPortalURL' | translate}}: {{monitor.Monitor.baseURL}}
          <br />{{'kMonRecordingURL' | translate}}: {{monitor.Monitor.controlURL}}
          <br /> <br/>
     
        </p>

       

        <div style="float:right;">
          <a class="button button-small icon icon-left icon ion-gear-a" href="" ng-click="changeConfig(monitor.Monitor.Name, monitor.Monitor.Id,monitor.Monitor.Enabled,monitor.Monitor.Function, monitor.Monitor.forceMjpeg);">{{'kConfiguration'
            | translate}}</a>
          <a class="button button-small icon icon-left ion-calendar" ng-click="gotoEvents(monitor.Monitor.Id)">{{'kEventsCap'|translate}}</a>
          <a class="button button-small icon icon-left ion-ios-eye" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,  monitor)">{{'kLiveView'
            | translate}} </a>
        </div>
      </div>
    </div>
    <ion-item ng-show="!monitors.length">
      {{monitorLoadStatus}}
    </ion-item>
  </ion-content>
</ion-view>
